<template>
  <view class="page_min_height page_bg page_pb">
    <view class="p-12" style="background-image: linear-gradient(to bottom, #dfeaff, #f5f6f7)">
      <!-- 服务 -->
      <view class="flex justify-between px-12 text-gray-500 text-xs">
        <view class="flex items-center">
          <uni-icons type="checkbox" color="#0064f2" size="16" />
          <view class="ml-2">真实认证律师</view>
        </view>
        <view class="flex items-center">
          <uni-icons type="checkbox" color="#0064f2" size="16" />
          <view class="ml-2">服务监管保障</view>
        </view>
        <view class="flex items-center">
          <uni-icons type="checkbox" color="#0064f2" size="16" />
          <view class="ml-2">专业服务团队</view>
        </view>
      </view>
      <!-- 轮播图 -->
      <view class="mt-12 rounded-md overflow-hidden">
        <uni-swiper-dot :info="bannerList" :current="current">
          <swiper class="h-120" autoplay @change="change">
            <swiper-item v-for="(url, index) in bannerList" :key="index">
              <image class="w-full h-120" :src="url" mode="aspectFill" />
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      <!-- 咨询 -->
      <button class="reset_btn !mt-12" open-type="contact">
        <view class="grid grid-cols-2 gap-x-12">
          <view class="relative h-70 rounded-md overflow-hidden shadow-[0_5px_15px_1px_rgba(38,128,235,0.3)]">
            <image class="absolute top-0 left-0 w-full h-80 z-10" src="/static/images/chat.png" mode="aspectFill" />
            <view class="absolute top-0 left-0 pt-14 pl-12 text-white z-[12]">
              <view class="text-white">联系客服</view>
              <view class="text-xs text-white mt-10">回复快, 解决率99%</view>
            </view>
          </view>
          <view class="relative h-70 rounded-md overflow-hidden shadow-[0_5px_15px_1px_rgba(38,128,235,0.3)]">
            <image class="absolute top-0 left-0 w-full h-80 z-10" src="/static/images/call.png" mode="aspectFill" />
            <view class="absolute top-0 left-0 pt-14 pl-12 text-white z-[12]">
              <view class="text-white">拨打电话</view>
              <view class="text-xs text-white mt-10">快速沟通, 解决率99%</view>
            </view>
          </view>
        </view>
      </button>
    </view>
    <view class="px-12">
      <view class="grid grid-cols-4 gap-x-12 gap-y-20 p-12 rounded-md bg-white">
        <navigator
          v-for="(item, index) in SERVICE_LIST"
          :key="index"
          :url="item.url"
          class="text-center"
          hover-class="none"
        >
          <image class="w-42 h-42 mb-4" :src="item.icon" mode="aspectFill" />
          <view class="text-xs text-gray-700">{{ item.title }}</view>
        </navigator>
      </view>
      <!-- 文章 -->
      <view v-if="articleList.length" class="p-12 pb-4 bg-white rounded-md mt-12">
        <view class="flex justify-between items-center mb-12">
          <view class="flex items-center gap-x-4">
            <uni-icons type="fire-filled" color="#f7573b" size="20" />
            <view class="text-base font-bold">普法文章</view>
          </view>
          <navigator class="text-gray-500" url="/pages/article/index" hover-class="none">
            <text class="text-xs">更多</text>
            <uni-icons type="right" color="" size="14" />
          </navigator>
        </view>
        <view v-for="(item, index) in articleList" :key="item.id" class="border-t border-solid border-gray-100">
          <ArticleItem :data="item" />
          <!-- 广告位 -->
          <view v-if="index + 1 === 5" class="my-12">
            <button class="flex reset_btn" open-type="contact">
              <image src="/static/images/ad.png" class="w-full" mode="widthFix" />
            </button>
          </view>
        </view>
      </view>
      <!-- 广告位 -->
      <view v-if="articleList.length < 5" class="mt-12">
        <button class="flex reset_btn" open-type="contact">
          <image src="/static/images/ad.png" class="w-full" mode="widthFix" />
        </button>
      </view>
      <!-- 律师 -->
      <view v-if="lawyerList.length" class="mt-12 p-12 bg-white rounded-md">
        <view class="flex justify-between items-center mb-12">
          <view class="flex items-center gap-x-4">
            <uni-icons type="vip-filled" color="#fbb03b" size="20" />
            <view class="text-base font-bold">精选律师</view>
          </view>
          <navigator class="text-gray-500" url="/pages/lawyer/index" hover-class="none">
            <text class="text-xs">更多</text>
            <uni-icons type="right" color="" size="14" />
          </navigator>
        </view>
        <view
          v-for="item in lawyerList"
          :key="item.id"
          class="flex justify-between py-12 border-t border-solid border-gray-100"
          @click="toDetail(item.id)"
        >
          <image :src="item.photo" mode="aspectFill" class="w-68 h-68 rounded-md" />
          <view class="flex-1 ml-12 pt-4">
            <view class="font-bold">{{ item.name }}</view>
            <view class="mt-5 text-xs text-gray-500">执业{{ item.working_years }}年</view>
            <view class="mt-5 text-xs text-gray-500 line-clamp-1">擅长：{{ item.specialty }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getArticleListApi } from '@/api/article';
import { getLawyerListApi } from '@/api/lawyer';
import { SERVICE_LIST } from '@/libs/config';
import ArticleItem from '@/components/ArticleItem.vue';

onLoad(() => {
  getArticleList();
  getLawyerList();
});

const bannerList = ref(['/static/images/banner.png', '/static/images/banner.png']);
const current = ref(0);
function change(e) {
  current.value = e.detail.current;
}

const articleList = ref([]);
async function getArticleList() {
  const { code, data } = await getArticleListApi({ page: 1, limit: 5 });
  if (code === 200) {
    data.list.forEach(item => {
      item.contentTxt = item.content.replace(/<[^>]+>/g, '').substr(0, 30);
      item.cover = item.cover || '/static/images/default.png';
    });
    articleList.value = articleList.value.concat(data.list);
  }
}

const lawyerList = ref([]);
// 获取律师列表
async function getLawyerList() {
  const { code, data } = await getLawyerListApi({ page: 1, limit: 5 });
  if (code === 200) {
    lawyerList.value = lawyerList.value.concat(data.list);
  }
}
// 跳转律师详情
function toDetail(id) {
  uni.navigateTo({
    url: `/pages/lawyer/detail?id=${id}`,
  });
}
</script>
